<template>
	<view>
		<tm-menubars title="个人中心" iconColor="white"></tm-menubars>
		<tm-sheet>
			<tm-col :grid="4">
				<tm-avatar dot-pos="bottom" :size="150" dot :shadow="4">
					<template v-slot:dot>
						<view class="text-align-center orange round-10 text-size-xs py-20"
							style="width: 60%; margin: auto;margin-bottom: -15upx;">
							VIP
						</view>
					</template>
				</tm-avatar>
			</tm-col>
			<tm-col :grid="8">
				<view class="text-align-left">
					<view class="mb-10">
						<text>昵称</text>
						<text class="ml-10">张三</text>
					</view>
					<view class="mb-10">
						<text>电话</text>
						<text class="ml-10">182*****007</text>
					</view>
					<view>
						<text>部门</text>
						<text class="ml-10">Dvadmin研发部</text>
					</view>
				</view>
			</tm-col>
		</tm-sheet>
		<tm-sheet>
			<view class="mb-20">
				<tm-col :grid="6" justify="left">
					<tm-icons size="36" name="icon-all-fill"></tm-icons>
					<text class="text-size-g ml-20">个人管理</text>
				</tm-col>
				<tm-col :grid="6" justify="right">
					<tm-switch v-model="isBlack" @change="setBlack" width="120" :text="['夜晚','白昼']"></tm-switch>
				</tm-col>
				
			</view>
			<tm-divider color="grey-lighten-3"></tm-divider>
			<view>
				<tm-grid @change="gridChange" :grid="3" :list="gridList"></tm-grid>
			</view>
		</tm-sheet>
		<view>
			<tm-grouplist :shadow="24" :round="5" :padding="[42, 42]">
				<tm-listitem title="个人资料" left-icon="icon-account" show-left-icon></tm-listitem>
				<tm-listitem title="常见问题" left-icon="icon-question-circle" show-left-icon
					left-icon-color="pink"></tm-listitem>
				<tm-listitem title="关于我们" left-icon="icon-smile-fill" show-left-icon
					left-icon-color="green"></tm-listitem>
			</tm-grouplist>
			<tm-grouplist :shadow="24" :round="5" :padding="[42, 42]">
				<tm-listitem title="隐私政策" left-icon="icon-lightbulb" show-left-icon></tm-listitem>
				<tm-listitem title="使用协议" left-icon="icon-flag" show-left-icon left-icon-color="pink"></tm-listitem>
				<tm-listitem title="清除缓存" left-icon="icon-ban" show-left-icon left-icon-color="green"></tm-listitem>
			</tm-grouplist>
		</view>
		<tm-sheet>
			<tm-row>
				<tm-col :grid="6" justify="left">
					<!-- <tm-icons :size="24" name="icon-filter-fill"></tm-icons> -->
					<tm-button width="64" height="64" shadow="10" size="m"></tm-button>
					<text class="text-size-n">主题色:</text>
					<text class="text-size-xs pa-8" :class="setColorName.color">{{setColorName.title}}</text>
				</tm-col>
				<tm-col :grid="6" justify="right">
						<tm-button theme="bg-gradient-primary-accent" size="m"  height="64"
							@click="setThemeShow=true">选择主题</tm-button>
					<tm-poup v-model="setThemeShow" position="bottom" height="200px">
						<view class="ma-10 text-size-g">
							<text>选择颜色</text>
							<tm-button class="ml-20" size="xs" @click="setDefault()">重置</tm-button>
						</view>
						<view class="flex-start flex-wrap flex-shrink pa-10">
							<view class="ma-10" v-for="(item, index) in themeList" :key="index" @tap="setColor(item)">
								<view class="flex-around" style="width: 50px;height:50px"
									:class="$tm.vx.state().tmVuetify+'.'+item.color">
									{{ item.title}}
								</view>
							</view>
						</view>
					</tm-poup>
				</tm-col>
			</tm-row>
		</tm-sheet>
		<view class="pa-n10">
			<tm-button theme="bg-gradient-indigo-accent" size="n" block>退出登录</tm-button>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'Mine',
		data() {
			return {
				gridList: [{
						icon: 'icon-bell',
						text: '消息通知',
						iconSize: 60,
						color: 'blue'
					},
					{
						icon: 'icon-like',
						text: '我的关注',
						iconSize: 60,
						color: 'red'
					},
					{
						icon: 'icon-headset',
						text: '联系客服',
						color: 'indigo',
						iconSize: 60
					}
				],
				isBlack:this.$tm.vx.state().tmVuetify.black,
				setThemeShow: false,
				themeList: [{
					"color": "primary",
					"title": "主要"
				}, {
					"color": "red",
					"title": "红色"
				}, {
					"color": "green",
					"title": "绿色"
				}, {
					"color": "blue",
					"title": "蓝色"
				}, {
					"color": "pink",
					"title": "粉色"
				}, {
					"color": "orange",
					"title": "橘色"
				}, {
					"color": "yellow",
					"title": "黄色"
				}, {
					"color": "indigo",
					"title": "靛蓝"
				}, {
					"color": "black",
					"title": "黑色"
				}],
			}
		},
		computed: {
			// //是否暗黑模式
			// isBlack(){
			// 	return this.$tm.vx.state().tmVuetify.black
			// },
			//设置颜色名称
			setColorName() {
				const {
					color
				} = this.$tm.theme.getTheme();
				let theme = this.themeList.find(item => {
					return color === item.color
				})
				if(theme){
					return theme
				}else{
					theme={}
					theme['title']='默认'
					theme['color']='primary'
					return theme
				}
			}
		},
		methods: {
			//九宫格点击
			gridChange(item) {
				console.log(item)
				const {
					index
				} = item
				if (index === 0) {
					//消息通知
				} else {
					uni.$tm.toast('功能开发中~');
				}
			},
			//设置颜色
			setColor(obj) {
				this.setThemeShow = false
				this.$tm.theme.setTheme(obj.color)
			},
			//设置暗黑模式
			setBlack({checked}) {
				this.$tm.theme.setBlack(checked)
			},
			//主题默认
			setDefault() {
				this.$tm.theme.clear()
				this.setThemeShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>